<template>
  <h2>vue3 + pinia</h2>
  <p>count: {{ count }}</p>
  <p>doubleCount: {{ doubleCount }}</p>
  <p>name: {{ name }}</p>
  <button @click="add">count++</button>
  <button @click="reset">重置仓库数据</button>

  <hr />

  <Child />
</template>

<script setup lang="ts">
import { computed } from "vue";
import Child from "./Child.vue";
import { useCounterStore } from "./stores/counter";

const store = useCounterStore();
const count = computed(() => store.count);
const doubleCount = computed(() => store.doubleCount);
const name = computed(() => store.name);

const add = () => {
  // 仓库数据可以直接修改
  // store.count++;
  // store.name = "lisi";

  // 仓库数据可以通过store.$patch()的方式进行修改
  // $patch方法用于一次性修改多个数据
  // $patch做的事情是将参数对象和仓库的state对象做合并
  // store.$patch({
  //   count: store.count + 1,
  //   name: "lisi",
  // });

  // 当修改数据的逻辑比较复杂的时候，可以调用仓库的action的函数来进行修改
  store.increment();
};

const reset = () => {
  // $reset()方法用于重置仓库数据的
  store.$reset();
};

// store.$subscribe()用于监听仓库数据的改变
store.$subscribe(() => {
  console.log(123);
});
</script>
